<template>
	<view>
		<view class="search-view">
			<image src="../../../static/coen/dingwei.svg" mode="widthFix"></image>
			<text class="search-text">番禺天安科技园产业园一座</text>
			<text>></text>
		</view>
		<view class="search-cont">
			<view class="search" @click="search">
				<image class="search-img" src="../../../static/coen/sousuo.svg" mode="widthFix"></image>
				<input type="text" placeholder="麻辣烫" disabled />

			</view>
		</view>
		<view class="">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<block v-for="(item,index) in label" :key='index'>
					<swiper-item>
						<block v-for="(list,i) in item" :key='i'>
							<view class="averageW">
								<image :src="list.img" mode="widthFix" ></image>
								<view class="title">{{list.title}}</view>
							</view>
						</block>

					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				// indicatorColor:red,
				label: [
					[{
							'img': '../../../static/inster/meishi.png',
							'title': '美食'
						},
						{
							'img': '../../../static/inster/chaoshi.png',
							'title': '超市便利'
						},
						{
							'img': '../../../static/inster/shuiguo.png',
							'title': '蔬菜水果'
						},
						{
							'img': '../../../static/inster/meituan.png',
							'title': '美团专送'
						},
						{
							'img': '../../../static/inster/paotui.png',
							'title': '跑腿代购'
						},
						{
							'img': '../../../static/inster/yexiao.png',
							'title': '夜宵'
						},
						{
							'img': '../../../static/inster/jintie.png',
							'title': '津贴联盟'
						},
						{
							'img': '../../../static/inster/pinping.png',
							'title': '甜点饮品'
						},
						{
							'img': '../../../static/inster/shaokao.png',
							'title': '龙虾烧烤'
						},
						{
							'img': '../../../static/inster/dangao.png',
							'title': '甜蜜蛋糕'
						}
					],
					[{
							'img': '../../../static/inster/hanbao.png',
							'title': '汉堡披萨'
						},
						{
							'img': '../../../static/inster/liaoli.png',
							'title': '日韩料理'
						},
						{
							'img': '../../../static/inster/malatang.png',
							'title': '麻辣烫'
						},
						{
							'img': '../../../static/inster/kuaican.png',
							'title': '快食简餐'
						},
						{
							'img': '../../../static/inster/xianhua.png',
							'title': '浪漫鲜花'
						},
						{
							'img': '../../../static/inster/lazi.png',
							'title': '无辣不欢'
						},
						{
							'img': '../../../static/inster/jiaozi.png',
							'title': '饺子馆'
						},
						{
							'img': '../../../static/inster/xiaochi.png',
							'title': '小吃馆'
						},
						{
							'img': '../../../static/inster/baofan.png',
							'title': '煲仔饭'
						},
						{
							'img': '../../../static/inster/qita.png',
							'title': '其他'
						}
					]
				]
			}
		},
		methods: {
			// changeIndicatorDots(e) {
			//     this.indicatorDots = !this.indicatorDots
			// },
			// changeAutoplay(e) {
			//     this.autoplay = !this.autoplay
			// },
			// intervalChange(e) {
			//     this.interval = e.target.value
			// },
			// durationChange(e) {
			//     this.duration = e.target.value
			// }
			search(){
				wx.navigateTo({
					url:'/pages/search/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-view {
		font-size: 30upx;
		font-weight: bold;
		height: 80upx;
		display: flex;
		align-items: center;

		image {
			width: 35upx;
			height: 35upx;
		}

		.search-text {
			padding: 0 10upx;
		}
	}

	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;

		.search {
			height: 70upx;
			line-height: 70upx;
			width: 100%;
			display: flex;
			// flex-direction:flex;
			background: #eff3f4;
			border-radius: 10upx;

			.search-img {
				margin: auto 0 auto 20upx;
				width: 40upx;
				height: 40upx;
				display: flex;
				flex-direction: flex;
				background: #eff3f4;
				border-radius: 10upx;
			}

			input {
				height: 70upx;
				line-height: 70upx;
				width: 100%;
				font-size: 25upx;
				color: #666666;
			}
		}


	}

	swiper {
		height: 320upx !important;

		swiper-item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;

			height: 100%;

			.averageW {
				width: calc((100%-15upx)/5);
				text-align: center;

				image {
					width: 70upx;
					height: 70upx;
					
				}
				.title{
					font-size: 30upx;
				}
				
			}
		}
	}
</style>
